<template>
	<view class="review">
		<NavBar title="商品评价"/>
		<view class="content">
			<view class="goods-review">
				<view class="top-info">
					<view class="review-title"> 商品评价 </view>
					<GoodsItem :goodsInfo="item" v-for="item in goodsList" :key="item" :isNum="false"/>
				</view>
				<view class="review-info">
					<view class="item">
						<view class="label"> 商品质量 </view>
						<view class="value"> 
							<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
							<view class="rate"> 很好 </view>
						</view>
					</view>
					<view class="item" v-if="orderShipments==1">
						<view class="label"> 配送服务 </view>
						<view class="value"> 
							<uni-rate v-model="riderStar" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onRiderChange" />
							<view class="rate"> 很好 </view>
						</view>
					</view>
					<view class="review-content">
						<textarea v-model="txt" placeholder="该商品满足了您的要求吗？"></textarea>
						<view class="img-box">
							<view class="img" v-for="(item, index) in imgUrl" :key="item">
								<image :src="item" class="i-img"/>
								<image src="/static/icon/shop/close-img.png" class="close" @tap="close(index)"/>
							</view>
							<ChooseBtn @choose="chooseImg" />
						</view>
					</view>
				</view>
			</view>
			<view class="review-btn" @tap="submit"> 立即评价 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import GoodsItem from '@/components/OneGoodsItem.vue';
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import { EvaGoodsApi } from '@/service/index.js'
	const orderId = ref()
	const goodsList = ref([])
	const txt = ref('')
	const star = ref(5)
	const riderStar = ref(5)
	const orderShipments = ref()
	const imgUrl = ref([])
	const imgId = ref([])
	const sku = computed(() => {
		let arr = []
		goodsList.value.forEach(item => {
			arr.push(item.sku)
		})
		return arr
	})
	const onChange = (e) => {
		star.value = e.value
	}
	const onRiderChange = (e) => {
		riderStar.value = e.value
	} 
	const chooseImg = (e) => {
		imgId.value.push(e.id)
		imgUrl.value.push(e.img_url)
	}
	const close = (i) => {
		imgId.value.splice(i, 1)
		imgUrl.value.splice(i, 1)
	}
	const submit = () => {
		if(txt.value =='') return getApp().globalData.toast('请输入评价内容')
		const params = {
			order_id: orderId.value,
			shop: []
		}
		if(orderShipments.value == 1) {
			sku.value.forEach(item => {
				params.shop.push({
					star: star.value,
					rider_star: riderStar.value,
					detail: txt.value,
					sku: item,
					is_ni: 0,
					img: imgId.value.join(',')
				})
			})
		} else {
			sku.value.forEach(item => {
				params.shop.push({
					star: star.value,
					detail: txt.value,
					sku: item,
					is_ni: 0,
					img: imgId.value.join(',')
				})
			})
		}
 		EvaGoodsApi(params).then(res => {
			getApp().globalData.toast('评价成功')
			uni.navigateBack()
		})
	}
	onLoad((e) => {
		const { order_id, goods, shipments } = e
		orderId.value = order_id
		goodsList.value = JSON.parse(goods)
		orderShipments.value = shipments
	})
</script>

<style lang="scss" scoped>
	.review {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.goods-review {
			.top-info, .review-info {
				padding: 15px 12px;
				background-color: #fff;
				border-radius: 10px;
				margin-bottom: 10px;
				.review-title {
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 20px;
					margin-bottom: 15px;
				}
				.goods-info {
					display: flex;
					.goods {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods-title {
							width: 173px;
							font-weight: 500;
							font-size: 14px;
							color: #3D3D3D;
							line-height: 16px;
							overflow: hidden; /* 隐藏溢出的内容 */
							white-space: nowrap; /* 禁止文本换行 */
							text-overflow: ellipsis; /* 添加省略号 */
						}
						.goods-desc {
							font-weight: 400;
							font-size: 12px;
							color: #999999;
							line-height: 16px;
						}
						.goods-price {
							font-weight: 600;
							font-size: 10px;
							color: #FF3B1E;
							line-height: 20px;
							margin-bottom: 15px;
							text { 
								&:nth-of-type(2) {
									font-size: 15px;
								}
								&:nth-last-of-type(1) {
									font-weight: 300;
									font-size: 11px;
									color: #AAAAAA;
									line-height: 11px;
									margin-left: 10px;
								}
							}
						}
					}
				}
			}
			.review-info {
				.item {
					display: flex;
					align-items: center;
					height: 50px;
					border-bottom: 1px solid #eeeeee;
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						margin-right: 20px;
					}
					.value {
						display: flex;
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						align-items: center;
						.rate {
							margin-left: 11px;
						}
					}
				}
				.review-content {
					padding-top: 15px;
					textarea {
						width: 100%;
						height: 100px;
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
					}
					.img-box {
						display: grid;
						gap: 20px;
						grid-template-columns: repeat(3, 1fr);
						.img {
							width: 74px;
							height: 74px;
							position: relative;
							.i-img {
								width: 100%;
								height: 100%;
								border-radius: 10px;
							}
							.close {
								width: 18px;
								height: 18px;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
					}
				}
			}
		}
		.review-btn {
			margin-top: 20px;
			height: 50px;
			line-height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
		.add {
			position: relative;
			width: 74px;
			height: 74px;
			border-radius: 10px;
			background: #F4F4F4;
			margin-top: 10px;
			&::before, &::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: block;
				content: '';
				width: 24px;
				height: 2px;
				background: #D8D8D8;
			}
			&::after {
				width: 2px;
				height: 24px;
			}
		}
	}
</style>
